<template>
  <div id="iframe" :class="showIframe ? 'enter' : 'leave'">
    <div class="my_frame">
      <span class="closeBtn" @click="changeIframe">
        X
      </span>
      <iframe
        src="https://hzsxmbzhbyxgs3.qiyukf.com/client?k=7d1d2db2bef979175a273a8a1b4b1a9b&wp=1&robotShuntSwitch=0&shuntId=1104542&language=zh-cn"
        frameborder="0"
        width="600"
        height="630"
        name="myIframe "
        id="myIframe"
      >
      </iframe>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const initHide = ref(true)
    const showIframe = ref(false)
    const changeIframe = () => {
      showIframe.value = !showIframe.value
      initHide.value = false
    }
    return {
      showIframe,
      initHide,
      changeIframe,
    }
  },
}
</script>

<style lang="scss">
#iframe {
  position: fixed;
  top: 100px;
  z-index: 999;
  right: 0;
  // transform: scale(1, 1);
  // transform-origin: 0% 0%;
  .my_frame {
    position: relative;
    background-color: transparent !important;
    border: 1px solid #ccc;
    .closeBtn {
      position: absolute;
      top: 2PX;/*no*/
      left: -38PX;/*no*/
      cursor: pointer;
      z-index: 9;
      font-size: 20PX;
      color: #fff;
      background-color: #337eff;
      padding: 8PX 14PX;
      border-radius: 4PX;
    }
  }
  &.enter {
    animation: iframe-enter .3s linear forwards;
    @keyframes iframe-enter {
      0% {
        right: -370px;
      }
      100% {
        right: 20px;
      }
    }
  }
  &.leave {
    animation: iframe-leave .5s forwards;
    @keyframes iframe-leave {
      0% {
        right: 20px;
      }
      100% {
        right: -650PX;
      }
    }
  }
}
</style>
